import React, { Component } from 'react'
import JdNav from "../Nav/JdNav"
import SearchInput from "../SearchInput/SearchInput"
import "./Category.scss";
import { GetCategoryList } from "../../api"
import { withRouter } from "react-router-dom"
class Category extends Component {
    //初始数据
    state = {
        //商品分类信息
        CategoryList: [],
        //当前下标
        selectIndex: 0,
        //右边的数据信息
        rightContent: []
    }
    //点击当前的分类商品的事件
    handleItemClick = (e) => {
        //console.log(e.target)
        //获取当前标签的index下标并转换为数字类型
        let { index } = e.target.dataset;
        index = parseInt(index)
        //console.log(index);
        //改变当前state
        this.setState({
            //当前下标
            selectIndex: index,
            //右边的数据信息
            rightContent: this.state.CategoryList[index]
        })
    }
    //点击跳转商品列表
    handleProductItemClick = (cat_id) => {
        this.props.history.push('goodList?cid=' + cat_id)
    }
    //获取数据请求
    async componentDidMount() {
        let res = await GetCategoryList();
       //console.log(res);
        //获取右边的数据信息获取数据存在就返回数据不存在返回空数组
        let message = res.message || [];
        this.setState({
            //商品分类信息
            CategoryList: message,
            //右边的数据信息
            rightContent: message[0],
        })
    }
    render() {
        return (
            <div className="sategor">
                <JdNav title="商品分类" left={false}></JdNav>
                <SearchInput title="搜索"></SearchInput>
                <div className="categoryContent">
                    {/* 左边的目录区开始 */}
                    <div className="categoryContentLeft" onClick={this.handleItemClick}>
                        {
                            this.state.CategoryList.map((v, index) => {
                                return <div key={v.cat_id}
                                    data-index={index}
                                    className={this.state.selectIndex === index ? "contentLeftItem active" : "contentLeftItem"} >
                                    {v.cat_name}
                                </div>
                            }
                            )
                        }
                    </div>
                    {/* 左边的目录区开始 */}
                    {/* 右边的目录区开始 */}
                    <div className="categoryContentRight">
                        {this.state.rightContent.children && this.state.rightContent.children.map((v, i) => {
                            return (<div className="contentRightIte" key={v.cat_id}>
                                <div className="RightItemTitle">{v.cat_name}</div>
                                <div className="ProductList">
                                    {v.children && v.children.map((val) => {
                                        return (
                                            <div className="ProductListItem" key={val.cat_id} onClick={this.handleProductItemClick.bind(this, val.cat_id)}>
                                                <div className="imagerWrapper">
                                                    <img src={val.cat_icon} alt="" />
                                                </div>
                                                <div className="title">
                                                    {val.cat_name}
                                                </div>
                                            </div>
                                        )
                                    }
                                    )}
                                </div>
                            </div>)
                        }
                        )}
                    </div>
                </div>
            </div>
        )
    }
}
export default withRouter(Category)